<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <style>
        .swiper {
            width: 100%;
            height: 200px;
        }

        .swiper img {
            width: 100%;
            height: 200px;
        }
    </style>
</head>

<body>
    <div class="g-container">
        <div class="g-title">
            <h3>城市</h3>
            <input type="text" placeholder="请输入搜索内容" />
            <h3>登录</h3>
        </div>
        <!-- 子路由输出 -->
        <div class="g-wrapper">

            <!-- <img style="width: 100%;height: 200px;" src="https://img.alicdn.com/imgextra/i3/2053469401/O1CN01g8ituT2JJiCsKjmDz_!!2053469401.png" alt="1"> -->
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="https://img.alicdn.com/imgextra/i3/2053469401/O1CN01g8ituT2JJiCsKjmDz_!!2053469401.png"
                            alt="" srcset="">
                    </div>
                    <div class="swiper-slide">
                        <img src="https://img2.baidu.com/it/u=717979571,3244631707&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=400"" alt=""/>
                    </div>
                    <div class=" swiper-slide">
                        <img src="https://img1.baidu.com/it/u=1733684228,4177721799&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=500"
                            alt="" srcset="">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <!-- <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div> -->

            </div>

            <!-- menu -->
            <div class="g-menu">
                <div class="item">
                    <span class="iconfont icon-meishi" style="background-color: gold;"></span>
                    <p>美食</p>
                </div>
                <div class="item">
                    <span class="iconfont icon-yule" style="background-color: aquamarine;"></span>
                    <p>电脑</p>
                </div>
                <div class="item">
                    <span class="iconfont icon-dianying" style="background-color: rgb(122, 59, 139);"></span>
                    <p>美食</p>
                </div>
                <div class="item">
                    <span class="iconfont icon-meishi"></span>
                    <p>美食</p>
                </div>
                <div class="item">
                    <span class="iconfont icon-waimai" style="background-color: rgb(181, 213, 202);"></span>
                    <p>美食</p>
                </div>
                <div class="item">
                    <span class="iconfont icon-meishi" style="background-color: gold;"></span>
                    <p>美食</p>
                </div>
                <div class="item">
                    <span class="iconfont icon-yule" style="background-color: aquamarine;"></span>
                    <p>电脑</p>
                </div>
                <div class="item">
                    <span class="iconfont icon-dianying" style="background-color: rgb(122, 59, 139);"></span>
                    <p>美食</p>
                </div>
                <div class="item">
                    <span class="iconfont icon-meishi"></span>
                    <p>美食</p>
                </div>
                <div class="item">
                    <span class="iconfont icon-waimai" style="background-color: rgb(181, 213, 202);"></span>
                    <p>美食</p>
                </div>
            </div>

            <div class="g-main">
                <div class="g-goods">
                    <div class="g-goods-item">
                        <img src="https://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000178605073_1_800x800.jpg"
                            alt="1" />
                        <div class="g-goods-right">
                            <h2 class="m-good-name ellipsis">科龙(Kelon) 正1.5匹</h2>
                            <p class="ellipsis">科龙(Kelon) 正1.5匹 定速 冷暖 空调挂机</p>
                            <p>90￥</p>
                        </div>
                    </div>
                    <div class="g-goods-item">
                        <img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070066196-000000000682437966_1_800x800.jpg"
                            alt="2" />
                        <div class="g-goods-right">
                            <h2 class="m-good-name ellipsis">康宝DJ118A+QB506</h2>
                            <p class="ellipsis">康宝DJ118A+QB506 侧吸式抽油烟机灶具套装 烟灶套装 近吸式油烟机燃气灶 厨房两件套 包安装</p>
                            <p>90￥</p>
                        </div>
                    </div>
                    <div class="g-goods-item">
                        <img src="https://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000178605073_1_800x800.jpg"
                            alt="1" />
                        <div class="g-goods-right">
                            <h2 class="m-good-name ellipsis">科龙(Kelon) 正1.5匹</h2>
                            <p class="ellipsis">科龙(Kelon) 正1.5匹 定速 冷暖 空调挂机</p>
                            <p>90￥</p>
                        </div>
                    </div>
                    <div class="g-goods-item">
                        <img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070066196-000000000682437966_1_800x800.jpg"
                            alt="2" />
                        <div class="g-goods-right">
                            <h2 class="m-good-name ellipsis">康宝DJ118A+QB506</h2>
                            <p class="ellipsis">康宝DJ118A+QB506 侧吸式抽油烟机灶具套装 烟灶套装 近吸式油烟机燃气灶 厨房两件套 包安装</p>
                            <p>90￥</p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!--底部tab区域-->
        <ul class="g-tab-footer">
            <li class="active"> 首页</li>
            <li class=""> 分类</li>
            <li class=""> 购物车</li>
            <li class=""> 我的</li>
        </ul>
    </div>
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
    <script>
        var mySwiper = new Swiper('.swiper', {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            autoplay: {
                delay: 1500
            },

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })        
    </script>
</body>

</html>